<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="../js/vue.js">
		</script>
	</head>
	<body>
		<template id="tmp">

			<input type="button" value="这是子组件的button按钮" @click="is" />

		</template>
		<div id="app">
			<com v-on:fun='show'></com>  <!-- 像这种属性传值 方法传递必须要在组件上写 不能再input上面写  否则还是找不到 -->
			<!-- v-on=@   v-on可以用@表示  就跟v-bind 可以用:表示一样 -->
		</div>
		<script>
			var com = {
				template: '#tmp',
				data(){
					return {person:{name:'小张',age:88}}
				},
				methods: {
					is() {
						this.$emit('fun',this.person)   // 组件对象 调用父类的方法  后面可以传递任意个数的参数 
					}
				}
			}

			new Vue({
				el: '#app',
				data: {},
				methods: {
					show(data) {
						console.log('这是父组件的show方法')
						//在这里打印了从子组件里面传递过来的data.person 还可以传递多个在 自定义的fun后面可以写
						console.log(data);
					},
				},
				components: {
					com
				}

			})
		</script>
	</body>
</html>
